<!DOCTYPE html>
<html>
<head>
    <title>Image ArcGIS MapServer</title>
    <link rel="stylesheet" href="https://openlayers.org/en/v3.20.1/css/ol.css" type="text/css">
    <!-- The line below is only needed for old environments like Internet Explorer and Android 4.x -->
    <script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=requestAnimationFrame,Element.prototype.classList,URL"></script>
    <script src="https://openlayers.org/en/v3.20.1/build/ol.js"></script>
    <style>
        #map {
            width: 100%;
            height: 100%;
            position: absolute;
        }
    </style>
</head>
<body>
<div id="map" class="map">
    <div id="mouse-position"></div>
</div>
<script>

    //实例化鼠标位置控件(MousePosition)
    var mousePositionControl = new ol.control.MousePosition({
        //坐标格式
        coordinateFormat:ol.coordinate.createStringXY(4),   //将坐标保留4位小数位，并转换为字符串
        //地图投影坐标
        projection:'EPSG:4326',
        //坐标显示样式，默认为ol-mouse-position
        className:'custom-mouse-position',
        //显示鼠标位置信息的目标地图容器
        target:document.getElementById('mouse-position'),
        //未定义坐标的标记
        undefinedHTML:'&nbsp;'       //鼠标离开地图时，显示空格
    });

    var url = 'http://localhost:6080/arcgis/rest/services/SampleWorldCities/MapServer';

    var layers = [
        new ol.layer.Image({
            source: new ol.source.ImageArcGISRest({
                ratio: 1,
                params: {},
                url: url
            })
        })
    ];
    var map = new ol.Map({
        layers: layers,
        target: 'map',
        view: new ol.View({
            center: [-10997148, 4569099],
            zoom: 3
        }),
        //加载控件到地图容器中
        controls:ol.control.defaults({}).extend([mousePositionControl])
    });
</script>
</body>
</html>